<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#app {
				width: 1200px;
				margin: 0px auto;
				padding: 0px;
				/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
				/* border: 1px ; */
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
			}

			.el-input {
				width: 280px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		
			}

			.el-form label {
				display: inline-block;
				font-size: 20px;
				width: 280px;
			}
			.el-input__inner {			
				text-align: center;
				font-size: 15px;
				border: 1px solid #eef6ff;
			}

			.d2 li {
				list-style: none;
			}

			.lyric-enter,
			.lyric-leave-to
				opacity: 0;
				transform: translateY(10px);
			}

			.lyric-enter-to,
			.lyric-leave {
				opacity: 1;

			}

			.lyric-enter-active,
			.lyric-leave-active {
				transition: all 0.7s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="" style=" position: sticky; z-index: 2; top: 0px; background-color: white; height: 100px; border: 2px solid #F8F8FF;">
				<el-row  style="margin-top: 20px;">
					<el-col :span="6" style="padding-left: 80px;">
						<h3>专利及专著情况详情</h3>
					</el-col>
					<el-col :span="14" style="margin-top: 20px;" >
						<el-steps :active="status" finish-status="finish">
						  <el-step title="填报数据"></el-step>
						  <el-step title="进行中"></el-step>
						  <el-step title="流转完成"></el-step>
						</el-steps>
					</el-col>
					<el-col :span="4" style="text-align: right; padding-top: 15px; padding-right: 80px; ">
						<el-button type="primary" @click="back()">
							返回
						</el-button>
					</el-col>
				</el-row>
			</div>
			

			<el-form ref="form" label-width="220px">
				<el-row style="margin-top: 30px;">
					<el-row>
						<el-col :span="24">
							<el-form-item label="专利或软件著作权名称:" >
								<el-input v-model="dataMessage.name" readonly style="width:780px;"></el-input>
							</el-form-item>
							<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="10">
							<el-form-item label="填写人姓名:">
								<el-input v-model="dataMessage.tianbaoName" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="专利/软著号:">
								<el-input v-model="dataMessage.zhuanliHao" readonly></el-input>
								<!-- 跟具自己的修改可修改为 奖项名称 出版社 组织单位 主持人 专利/软著号  -->
								<!-- 荣誉称号的可以删除此item -->
							</el-form-item>
						</el-col>
					</el-row>
					

					<el-row>
						<el-col :span="10">
							<el-form-item label="参加人数:">
								<el-input v-model="dataMessage.zongRenShu" readonly></el-input>
								<!-- 仅 发表论文、指导竞赛、获奖情况的（修改为“奖项级别”）保留-->
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="本人排名:">
								<el-input v-model="dataMessage.meSort" readonly></el-input>
								<!-- 仅获奖情况的保留 -->
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="授予时间:">
								<el-input v-model="dataMessage.shouYuDate" readonly></el-input>
								<!-- 仅获奖情况、科研（立项单位）的保留 -->
							</el-form-item>
						</el-col>
					</el-row>

		
					<el-col :span="10">
						<el-form-item label="提交人:">
							<el-input v-model="dataMessage.createBy" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="提交时间:">
							<el-input v-model="dataMessage.createTime" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="更新时间:">
							<el-input v-model="dataMessage.updateTime" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="审批负责人:">
							<el-input v-model="dataMessage.manager" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="当前状态:">
							<el-input v-model="dataMessage.status" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="当前节点:">
							<el-input v-model="dataMessage.node" readonly></el-input>
							<!-- 仅获奖情况的保留 -->
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="认证材料:">
							<el-input type="button"  v-model="pleaseClick" @click.native="showcont2" ></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="24">
						<el-collapse-transition>
							<div v-show="show2" class="d2">
								<h4 style="padding-left: 220px; color: #666666;" v-show="isZhengming">暂未提交证明材料</h4>
								<ul style="padding-left: 220px;">
									<li v-for="(item,index) in cailiao"><el-link :href="'http://localhost:8080/files/'+item.fileFullPath" :underline="false"><i class="el-icon-document">{{item.fileName}}</i></el-link></li>
								</ul>
							</div>
						</el-collapse-transition>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注:">
							<el-input readonly autosize type="textarea" v-model="dataMessage.memo" style="width: 500px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审批流程:">
							<el-input type="button"  v-model="pleaseClick" @click.native="showcont1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-collapse-transition>
							<div class="block" v-show="show" style="padding-left: 80px;">
								<el-timeline>
									<el-timeline-item v-for="(item,index) in liuchengData">
										<el-card>			
											<h4>{{item.shenHeResult}}</h4>
											<h4 v-show="item.show1">{{item.name}}更新信息</h4>
											<h4 v-show="item.show">审核意见:{{item.memo}}</h4>
											<h4>{{item.name}} 提交于 {{item.time}}</h4>
											
										</el-card>
									</el-timeline-item>

								</el-timeline>
							</div>
						</el-collapse-transition>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核意见:">
							<el-input readonly autosize type="textarea" v-model="shenhe_memo" style="width: 500px;"></el-input>
						</el-form-item>
					</el-col>
				
					
			
					<el-col :span="8">
						<el-form-item  label="审核结果:">
							<el-switch disabled style="display: block;margin-top: 10px;margin-left: 5px; margin-bottom: 50px;" v-model="value"
								active-color="#13ce66" inactive-color="#ff4949" active-text="通过" inactive-text="未通过">
							</el-switch>
						</el-form-item>
					
				</el-row>
			</el-form>

		</div>
	</body>
</html>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			id:0,
			dataMessage:{},
			fileName:{},
			activeName: 'second',
			list:{},
			input: "",
			show: false,
			show2: false,
			show3:false,
			isZhengming:false,
			value: false,
			cailiao: [],
			shenhe_memo:"",
			status:1,
			shenhe:[],
			liuchengData: [
			],
			pleaseClick: "点击显示",
		},
		methods: {
			findAll(){
				this.id=localStorage.getItem("id")
				axios(window.gsau+"zhuanlizhuanzhu/findbyid/"+this.id).then((res)=>{
					this.dataMessage=res.data.data
					if(res.data.data.status=="进行中"){
						this.status=2
					}else{
						this.status=3
					}
					if(res.data.data.node=="审核已通过"){
						this.disabled_value=true
						this.value=true
					}
					this.findEndShenHe()
				})
				this.findZhengming()
			},
			findShenHe(){
				axios(window.gsau+"zhuanlizhuanzhu/findshenhe/"+this.id).then((res)=>{
					let m=[]
					m=res.data.data
					for (var i = 0; i < m.length; i++) {
						let n={
							show1:'',
							show:'',
							shenHeResult:'',
							name:'',
							time:'',
							memo:'',
						}	
						if(m[i].shenHeTime!=null){
							n.show1=false
							n.show=true
							n.shenHeResult=m[i].shenHeResult
							n.time=m[i].shenHeTime
							n.name=m[i].shenHeName
							n.memo=m[i].memo
							this.liuchengData.push(n)
						}else{
							if(i==0){
								n.show1=false
							}else{
								n.show1=true
							}
							n.show=false
							n.shenHeResult=m[i].shenHeResult
							n.time=m[i].tijiaoTime
							n.name=m[i].tijiaoName
							n.memo=m[i].memo
							this.liuchengData.push(n)
						}
					}
				})
			},
			findEndShenHe(){
				axios(window.gsau+"zhuanlizhuanzhu/findendshenhe/"+this.id).then((res)=>{
					this.shenhe=res.data.data
					if(this.shenhe!=null){
						this.shenhe_memo=res.data.data.memo
					}
				})
			},
			findZhengming(){
				axios(window.gsau+"zhuanlizhuanzhu/findzhengmingbyid/"+this.id).then((res)=>{
					this.cailiao=res.data.data
					if(this.cailiao.length==0){
						this.isZhengming=true
					}
				})
			},
			back(){
				window.location.href="list.html"
			},
			showcont1: function() {
				this.show = !this.show;
				this.findShenHe()
			},
			showcont2: function() {
				this.show2 = !this.show2;
			},
			submit:function(){
				console.log(this.textarea)
				console.log(this.value2)
			}
		},
		created:function(){
			this.findAll()
			
		}
	})
</script>
